<script>
/**
 * @desc 与用户信息绑定的出行人管理,在填写订单时使用
 */

import { mapState, mapActions } from 'vuex'
import { navTo } from '@/utils'
import editIco from '@/assets/icons/edit.svg'
import deleteIco from '@/assets/icons/delete.svg'

export default {
  name: 'travelers-admin',
  data: () => ({ editIco, deleteIco }),
  computed: { ...mapState('SignIn', ['travelers']) },
  methods: {
    navTo,
    ...mapActions('SignIn', ['deleteTraveler']),
    handleDelete(id) {
      wx.showModal({
        title: '提示',
        content: '是否要删除该联系人?',
        success: res => {
          res.confirm && this.deleteTraveler(id)
        }
      })
    }
  }
}
</script>

<template>
  <div class="travelers-admin">
    <div class="traveler-list">
      <div
        v-for="v in travelers"
        :key="v.id"
        class="traveler"
      >
        <div class="info">
          <p class="name">{{v.name}}</p>
          <p class="phone">{{v.mobile}}</p>
        </div>
        <div class="ctrl-btn" @click="()=>navTo({name:'traveler-edit',query:{id:v.id}})">
          <img :src="editIco" class="icon">
          <span class="text">编辑</span>
        </div>
        <div class="ctrl-btn" @click="()=>handleDelete(v.id)">
          <img :src="deleteIco" class="icon">
          <span class="text">删除</span>
        </div>
      </div>
    </div>
    
    <button class="add-btn" @click="()=>navTo('traveler-add')">添加出行人</button>
  </div>
</template>

<style lang="scss" scoped>
.traveler {
  display: flex;
  margin: 20px 10px 0;
  padding-bottom: 20px;
  font-size: 16px;
  &:not(:last-child) {
    border-bottom: 1px dashed $border-color;
  }

  .info {
    flex: 1;
  }
  .ctrl-btn {
    display: flex;
    align-items: center;
    margin-left: 20px;
    color: $gray-font-color;
    .icon {
      width: 20px;
      height: 20px;
      margin-right: 2px;
    }
  }
}

.add-btn {
  margin: 10px;
  background-color: $main-color;
  color: #ffffff;
}
</style>
